@page "/Card"

@using FluentUI.Demo.Shared.Pages.Card.Examples



<h1>Card</h1>

<p>The <code>&lt;FluentCard&gt;</code> component is a visual container without semantics that takes children. Cards are snapshots of content that are typically used in a group to present collections of related information.</p>
<p><code>&lt;FluentCard&gt;</code> wraps the <code>&lt;fluent-card&gt;</code> element, a web component implementation of a card leveraging the Fluent UI design system.</p>
<p>Use the <code>Width</code> and <code>Height</code> parameters to size the card. Both values default to 350 pixels.</p>
<h2 id="example">Examples</h2>

<DemoSection Title="Simple card example" Component="@typeof(CardDefault)"></DemoSection>

<DemoSection Title="Area restricted examples" Component="@typeof(CardAreaRestricted)">
    <Description>
        <p>
            By default a card restricts its content to the card area. This means, for exmple, that if you have a select list with a lot of items, the list will be cut off at the bottom of the card.
            You can override this behavior by setting the <code>AreaRestricted</code> property to <code>false</code>.
        </p>
    </Description>
</DemoSection>


<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentCard)" />